<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Learning Website</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        .header {
            background-color: #007BFF;
            color: white;
            padding: 20px;
            text-align: center;
        }
        .container {
            padding: 20px;
        }
        .course {
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 15px;
            margin: 10px 0;
            display: flex;
            align-items: center;
        }
        .course img {
            width: 150px;
            height: 100px;
            margin-right: 15px;
            border-radius: 5px;
        }
        .course-info {
            flex: 1;
        }
        .view-course {
            text-decoration: none;
            background-color: #28a745;
            color: white;
            padding: 10px 15px;
            border-radius: 5px;
        }
        .view-course:hover {
            background-color: #218838;
        }
        .video-container {
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            background-color: #f4f4f4;
            padding: 20px;
        }
        video {
            width: 80%;
            max-width: 800px;
            border: 1px solid #ccc;
            border-radius: 10px;
        }
        .back-link {
            text-decoration: none;
            background-color: #007BFF;
            color: white;
            padding: 10px 15px;
            border-radius: 5px;
            margin-top: 20px;
        }
        .back-link:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
<div class="header">
    <h1>Welcome to Learning Website</h1>
    <p>Explore and learn from a variety of courses!</p>
</div>

<!-- Course List -->
<div class="container" id="courseList">
    <div class="course">
        <img src="https://via.placeholder.com/150" alt="HTML Basics">
        <div class="course-info">
            <h2>HTML Basics</h2>
            <p>Learn the fundamentals of HTML to build web pages.</p>
            <button class="view-course" onclick="playVideo('HTML Basics', 'aimer.mp4')">View Course</button>
        </div>
    </div>

    <div class="course">
        <img src="https://via.placeholder.com/150" alt="CSS Fundamentals">
        <div class="course-info">
            <h2>CSS Fundamentals</h2>
            <p>Understand the basics of CSS for web styling.</p>
            <button class="view-course" onclick="playVideo('CSS Fundamentals', 'css-video.mp4')">View Course</button>
        </div>
    </div>

    <div class="course">
        <img src="https://via.placeholder.com/150" alt="JavaScript for Beginners">
        <div class="course-info">
            <h2>JavaScript for Beginners</h2>
            <p>Get started with JavaScript to add interactivity to web pages.</p>
            <button class="view-course" onclick="playVideo('JavaScript for Beginners', 'js-video.mp4')">View Course</button>
        </div>
    </div>
</div>

<!-- Video Player -->
<div class="video-container" id="videoPlayer">
    <h1 id="videoTitle">Simple Video Player</h1>
    <video id="videoElement" controls>
        <source src="" type="video/mp4">
        Your browser does not support the video tag.
    </video>
    <button class="back-link" onclick="goBack()">← Back to Courses</button>
</div>

<script>
    function playVideo(title, videoSrc) {
        // Hide the course list
        document.getElementById('courseList').style.display = 'none';
        // Show the video player
        document.getElementById('videoPlayer').style.display = 'flex';
        // Set the video title
        document.getElementById('videoTitle').innerText = title;
        // Set the video source
        const videoElement = document.getElementById('videoElement');
        videoElement.querySelector('source').src = videoSrc;
        videoElement.load();
    }

    function goBack() {
        // Hide the video player
        document.getElementById('videoPlayer').style.display = 'none';
        // Show the course list
        document.getElementById('courseList').style.display = 'block';
    }
</script>
</body>
</html>
